<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;" >
      个人信息维护
    </div>
    <div class="tw-m-5 tw-p-5 tw-border tw-shadow ">
        <q-form @submit="submitForm()" @reset="resetForm()" class="tw-space-y-3">
          <div class="text-h6" style="padding-left: 3px;border-left: 5px solid #3370FF;">
            信息修改
          </div>
          <div class="tw-grid tw-grid-cols-3 tw-gap-3">
            <q-input outlined
                     v-model="form.tname"
                     label="用户名"
                     type="text"
                     dense
                     :rules="[val => !!val || '用户名不能为空']"
            />
            <q-input outlined
                     v-model="form.tnum"
                     label="教工号"
                     type="text"
                     dense
                     disable
            />
            <q-input outlined
                     v-model="form.title"
                     label="职称"
                     type="text"
                     dense
                     disable
            />

            <q-input outlined
                     v-model="form.office"
                     label="职称"
                     type="text"
                     dense
            />
            <q-input outlined
                     v-model="form.age"
                     label="年龄"
                     type="number"
                     dense
                     disable
            />

            <q-input outlined
                     v-model="form.qq"
                     label="QQ"
                     type="text"
                     dense

            />
            <q-input outlined
                     v-model="form.email"
                     label="电子邮件"
                     type="email"
                     dense
            />
            <q-input outlined
                     v-model="form.tel"
                     label="电话"
                     type="tel"
                     dense
            />
          </div>
          <div class="text-h6" style="padding-left: 3px;border-left: 5px solid #3370FF;">
            密码修改
          </div>
          <q-input outlined
            v-model="form.password"
            label="密码"
            type="password"
            dense
            :rules="[val => !!val || '密码不能为空', val => val.length >= 6 || '密码长度不能少于6位']"
          />
          <q-input outlined
            v-model="form.confirmPassword"
            label="确认密码"
            type="password"
            dense
            :rules="[val => !!val || '确认密码不能为空', val => val === form.password || '两次密码输入不一致']"
          />
          <q-btn type="submit" label="保存" color="primary" class="q-mt-md" />
          <q-btn type="reset" label="重置" class="q-mt-md q-ml-sm" />
        </q-form>
    </div>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {api} from "boot/axios";
import {useQuasar} from "quasar";

const $q = useQuasar()

let info = ref(JSON.parse(localStorage.getItem('info')))
let form = ref({
  username: info.value.sname,
  tnum:info.value.tnum,
  tname: info.value.tname,
  qq: info.value.qq,
  age:info.value.age,
  email: info.value.email,
  tel:info.value.tel,
  office:info.value.location,
  dept: info.value.dept,
  title:info.value.ttile,
  password: info.value.password,
  confirmPassword: info.value.password
})
let submitForm = ()=>{
  let formData = new FormData()
  formData.append('tnum', form.value.tnum)
  formData.append('tname', form.value.tname)
  formData.append('age', form.value.age)
  formData.append('qq', form.value.qq)
  formData.append('email', form.value.email)
  formData.append('tel', form.value.tel)
  formData.append('dept', form.value.dept)
  formData.append('ttile', form.value.title)
  formData.append('location', form.value.office)
  formData.append('password', form.value.confirmPassword)

  api({
    url: '/job/teacher/update',
    method: 'post',
    data: formData
  }).then((res)=>{
    let data = res.data.data
    if (res.data.code === 200) {
      api.get('/job/teacher/getinfo?'+new URLSearchParams({tnum:form.value.tnum})).then((res)=>{
        localStorage.setItem('info', JSON.stringify(res.data.data))
      })
      $q.notify({
        message: '修改成功',
        color: 'positive',
        position: 'top'
      })
    } else {
      $q.notify({
        message: '修改失败',
        color: 'negative',
        position: 'top'
      })
    }
  })



}
let resetForm = ()=>{

}
</script>

<style scoped>

</style>
